<template>
  <v-chart :option="option" autoresize :loading="load" class="pack"/>
</template>

<script>
import {ref, defineComponent} from "vue";
export default defineComponent({
  name: "GroupPieChart",
  data(){
    let load = false
    let equipment = ['华为', '中兴', '爱立信', '索尼', '联想', '思科'];
    let project = ['华为', '中兴', '烽火', '阿尔卡特', '三星', 'tplink', '惠普', '戴尔'];
    let colorList = ['#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac']
    let option = {
      backgroundColor: '#fff0',
      tooltip: {
        formatter: function(param) {
          if (param.data.type == null) {
            return param.data.name + ":" + param.value + '个';
          } else {
            return param.data.type + ":" + param.value + '个';
          }
        }
      },
      series: [{
        name: '整体分类',
        type: 'pie',
        radius: [0, '30%'],
        label: {
          position: 'inner',
        },
        //内部饼图样式设置
        itemStyle: {
          normal: {
            borderColor: '#fff0',
            borderWidth: 1,
            color: function(params) {
              return colorList[params.dataIndex]
            }
          }
        },
        selectedMode: 'single',
        data: [{
          value: 875,
          name: '传输',
        },
          {
            value: 1239,
            name: '话务',
          },
        ]
      },
        {
          name: '招标方式',
          type: 'pie',
          radius: ['40%', '55%'],
          //外部换饼图样式设置
          itemStyle: {
            normal: {
              color: function(params) {
                return colorList[params.dataIndex]
              }
            }
          },
          label: {
            normal: {
              textStyle:{
                color: '#fff'
              },
              formatter: function(params) {
                if (params.value !== 0)
                  return params.data.type + ":" + params.value + '个';
                else
                  return '';
              },
              show: true,
            },
          },
          data: [{
            value: 135,
            name: '传输',
            type: equipment[0],
          },
            {
              value: 200,
              name: '传输',
              type: equipment[1],
            },
            {
              value: 100,
              name: '传输',
              type: equipment[2],
            },
            {
              value: 50,
              name: '传输',
              type: equipment[3],
            },
            {
              value: 300,
              name: '传输',
              type: equipment[4],
            },
            {
              value: 90,
              name: '传输',
              type: equipment[5],
            },
            {
              value: 310,
              name: '话务',
              type: project[0],
            },
            {
              value: 234,
              name: '话务',
              type: project[1],
            },
            {
              value: 35,
              name: '话务',
              type: project[2],

            },
            {
              value: 100,
              name: '话务',
              type: project[3],
            },
            {
              value: 40,
              name: '话务',
              type: project[4],

            },
            {
              value: 400,
              name: '话务',
              type: project[5],
            },
            {
              value: 100,
              name: '话务',
              type: project[6],
            },
            {
              value: 20,
              name: '话务',
              type: project[7],
            },
          ]
        }
      ]
    }
    return{
      option: ref(option),
      load: ref(load)
    }
  }
})
</script>

<style scoped>

</style>